<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: Boolean,
  editForm: Object,
  isCreate: Boolean
})

const emit = defineEmits(['update:visible', 'save'])

// 表单引用
const formRef = ref(null)

// 验证规则
const rules = {
  name: [
    { required: true, message: '姓名不能为空', trigger: 'blur' },
    { min: 2, max: 4, message: '姓名长度为2-4个字符', trigger: 'blur' }
  ],
  phoneNumber: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { 
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入有效的手机号码',
      trigger: 'blur'
    }
  ],
  gender: [
      { required: true, message: '请选择性别', trigger: 'blur' }
  ],
  birthDate: [
    {
      pattern: /^\d{4}-\d{2}-\d{2}$/,
      message: '日期格式应为YYYY-MM-DD',
      trigger: 'blur'
    }
  ],
  email: [
    { 
      type: 'email',
      message: '请输入有效的邮箱地址',
      trigger: 'blur'
    }
  ]
}

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
}

// 保存修改
const handleSaveEdit = async () => {
  try {
    // 触发表单验证
    await formRef.value.validate()
    
    // 构造规范数据
    const validatedData = {
      ...props.editForm,
      name: props.editForm.name.trim(),
      phoneNumber: props.editForm.phoneNumber.trim(),
      // gender: props.editForm.gender==='男' ? 1 : 0,
    }
    emit('save', validatedData)
    handleClose()
  } catch (error) {
    ElMessage.warning('请完善表单信息')
  }
}
</script>

<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="val => emit('update:visible', val)"
    :title="isCreate ? '添加联系人' : '修改联系人信息'"
  >
    <el-form 
      ref="formRef"
      :model="editForm"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="姓名" prop="name">
        <el-input 
          v-model="editForm.name" 
          placeholder="请输入真实姓名"
          clearable
        />
      </el-form-item>

      <el-form-item label="手机号" prop="phoneNumber">
        <el-input
          v-model="editForm.phoneNumber"
          placeholder="请输入11位手机号"
          maxlength="11"
        />
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-select 
          v-model="editForm.gender" 
          placeholder="请选择性别"
          clearable
        >
        <el-option :value="1" label="男" />
        <el-option :value="0" label="女" />
        </el-select>
      </el-form-item>

      <el-form-item label="出生日期" prop="birthDate">
        <el-date-picker
          v-model="editForm.birthDate"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="电子邮件" prop="email">
        <el-input
          v-model="editForm.email"
          placeholder="name@example.com"
          clearable
        />
      </el-form-item>

      <el-form-item label="联系地址" prop="address">
        <el-input
          v-model="editForm.address"
          placeholder="请输入详细地址"
          :minlength="5"
          show-word-limit
          clearable
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSaveEdit">
        {{ isCreate ? '创建' : '保存' }}
      </el-button>
    </template>
  </el-dialog>
</template>